<template>
  <div class="header d-flex pd-tb10 font-14 pd-l35">
    <div class="flex-2 d-flex">
      <div>歌曲</div>
      <!-- <div class="d-flex flex-column">
        <el-icon><CaretTop /></el-icon>
        <el-icon><CaretBottom /></el-icon>
      </div> -->
    </div>
    <div class="flex-1">歌手</div>
    <div class="flex-1">专辑</div>
    <div class="flex-1">时长</div>
  </div>

  <div
    class="song-item d-flex a-center"
    v-for="(item, index) in listData"
    :key="item.id"
    :class="{ active: item.id === currentSong.id }"
  >
    <love class="pd-lr10" v-model="item.isLike" :sheetId="props.sheetId" :songId="item.id" />
    <div class="flex-1 d-flex" style="line-height: 20px">
      <div class="flex-2 d-flex a-center">
        <div class="flex-1 songName">{{ item.name }}</div>
        <div class="operation d-flex a-center">
          <span class="iconfont" v-if="item.isPlay" @click="playChange(item)">&#xe87a;</span>
          <span class="iconfont" v-else @click="playChange(item)">&#xe87c;</span>
          <span class="iconfont" @click="showAddMenu($event, index)">&#xe6a4;</span>
          <span class="iconfont" @click="showMoreMenu($event, index)">&#xe68f;</span>
        </div>
      </div>
      <div class="flex-1">
        <span class="music-hover singerName">{{ item.singerName }}</span>
      </div>
      <div class="flex-1">
        <span class="music-hover albumName">{{ item.albumName }}</span>
      </div>
      <div class="flex-1 font-14">
        <span style="color: #a8a8a8">{{ item.duration }}</span>
      </div>
    </div>
  </div>

  <addContextMenu ref="addContextMenuRef" :item="currentOperation" />

  <moreContextMenu
    ref="moreContextMenuRef"
    :item="currentOperation"
    @menuPlay="menuPlay"
    @delete="deleteSong"
    @love="handleLove"
  />
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import love from './love.vue'
  import addContextMenu from './addContextMenu.vue'
  import moreContextMenu from './moreContextMenu.vue'
  import bus from '@/utils/bus'
  import { deleteSheetSong } from '@/api/sheet'
  import { ElMessage } from 'element-plus'
  import { setSongLike } from '@/api/song'

  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'SongList'
  })

  const props = defineProps<{
    list: any
    sheetId?: number
  }>()

  const listData: any = computed({
    get() {
      return props.list
    },
    set() {}
  })

  listData.value.forEach((item: any) => {
    item.isPlay = false
  })

  // 当前正播放的歌曲
  const currentSong = ref({ id: -1 })
  // 当前正操作的数据
  const currentIndex = ref<number>(0)
  const currentOperation: any = computed({
    get() {
      return listData.value[currentIndex.value]
    },
    set() {}
  })

  bus.on('handleMenuPlay', () => {
    if (listData.value.length) playChange(listData.value[0])
  })

  /**
   * 播放入口函数
   * @param item
   */
  const playEntry = (item: any) => {
    // 1. 设置高亮
    currentSong.value = item
    // 2. 播放队列的初始化
    bus.emit('setMusicList', listData.value)
    // 3. 歌曲的初始化
    bus.emit(
      'playInit',
      listData.value.findIndex((data: any) => data.id === item.id)
    )
  }

  // 设置当前播放的歌曲
  bus.on('setCurrentSong', (data: any) => {
    currentSong.value = data
    listData.value.forEach((item: any) => {
      item.isPlay = item.id === currentSong.value.id
    })
  })

  const playChange = (item: any) => {
    // 1. 将别的数据先重置
    listData.value.forEach((data: any) => {
      if (item.id !== data.id) {
        data.isPlay = false
      }
    })
    // 2. 变更状态
    item.isPlay = !item.isPlay

    if (item.isPlay) {
      playEntry(item)
    } else {
      // 暂停
      bus.emit('setPause')
    }
  }

  // 监听控制台的播放变化
  bus.on('playChange', val => {
    listData.value.forEach((item: any) => {
      if (item.id === currentSong.value.id) {
        item.isPlay = val
      }
    })
  })

  // 添加图标对应的菜单
  const addContextMenuRef = ref<any>(null)
  const showAddMenu = (e: MouseEvent, index: number) => {
    currentIndex.value = index
    addContextMenuRef.value.show({
      top: e.clientY,
      left: e.clientX
    })
  }

  // 更多图标对应的菜单
  const moreContextMenuRef = ref<any>(null)
  const showMoreMenu = (e: MouseEvent, index: number) => {
    currentIndex.value = index
    moreContextMenuRef.value.show({
      top: e.clientY,
      left: e.clientX
    })
  }

  /**
   * 更多操作中的点击播放
   */
  const menuPlay = () => {
    // 1. 重置所有的状态
    listData.value.forEach((item: any) => (item.isPlay = false))
    // 2. 变更状态
    listData.value[currentIndex.value].isPlay = true
    playEntry(currentOperation.value)
  }

  /**
   * 删除歌曲
   */
  const deleteSong = () => {
    deleteSheetSong({
      sheetId: props.sheetId,
      songId: currentOperation.value.id
    }).then(() => {
      ElMessage({
        message: `删除成功`,
        type: 'success'
      })
      listData.value.splice(currentIndex.value, 1)
    })
  }

  /**
   * 更多操作中的我喜欢
   */
  const handleLove = () => {
    const isLike = currentOperation.value?.isLike ? 0 : 1
    setSongLike({
      sheetId: props.sheetId,
      songId: currentOperation.value?.id,
      isLike
    }).then(() => {
      listData.value[currentIndex.value].isLike = isLike
    })
  }
</script>
<style lang="scss" scoped>
  .header {
    color: #7b7b7b;
  }
  .song-item {
    width: 100%;
    cursor: default;
    height: 45px;
    border-radius: 4px;
    &:hover {
      background-color: #efefef;
      & .operation {
        display: block;
      }
    }
    cursor: default;
    &.active {
      background-color: #efefef;
      .songName,
      .singerName,
      .albumName {
        color: $musicColor;
      }
    }
    .operation {
      height: 20px;
      display: none;
      // line-height: 20px;
      span {
        cursor: pointer;
        color: rgb(120, 120, 120);
        padding-right: 15px;
        &:hover {
          color: $musicColor;
        }
      }
    }
  }
</style>
